import Counter from '../components/Counter';
import { connect } from 'react-redux';
import * as ActionCreators from '../actions';

console.log('[containers/Connect1.js] =>react-redux.connect');

export default connect(
    state => ({ counter: state.counter }), // 函数返回的对象将被合并到组件的props中
    ActionCreators  //多个action创建函数组成的对象，该对象也会被合并到组件的props中，而且可以直接运行，无须使用dispatch.
)(Counter);


// connect 的工作原理
// connect是一个嵌套函数。运行connect()后，会生成一个高阶组件（Higher-order Components）。
// 该高阶组件接受一个组件作为参数再次运行，会生成一个新组件。
//高阶组件新生成的组件叫Connect组件。
// Connect组件从context中获取了来自Provider的store，然后从store中获取state和dispatch，
// 最后将state和经过dispatch加工的action创建函数连接到组件上，并在state变化时重新渲染组件。


// 什么是高阶组件?
// 高阶组件（Higher-order Components）是一个函数。它接受React组件作为参数，并返回一个新的React组件。
// 高阶组件的意义在于可以让多个组件共同使用一些逻辑。
// 比如，react-redux将Redux与React组件的连接逻辑封装在高阶组件connect()中，然后就可以方便地给每个需要连接的组件使用了。


